<template>
  <div>
    <div class="demo-input-suffix">
      <span style="width: 10%">患者姓名：</span>
      <el-input
        style="width: 10%"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="patientName"
      >
      </el-input>
      <span style="width: 10%">患者身份证：</span>
      <el-input
        style="width: 20%"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="cardId"
      >
      </el-input>
      <el-select style="margin: 10px"
               v-model="selectRegion"
               @change="findAreaList(selectRegion)"
               slot="prepend"
               clearable
               placeholder="请选择区">
        <el-option v-for="(items,index) in regionList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
      </el-select>
      <el-select style="margin: 10px"
               v-model="selectStreat"
               v-show="role != '3'"
               @change="findAreaList1(selectStreat)"
               slot="prepend"
               clearable
               placeholder="请选择街道">
        <el-option v-for="(items,index) in streatList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
      </el-select>
      <el-select style="margin: 10px"
               v-model="selectCommunity"
               @change="findAreaList2()"
               slot="prepend"
               clearable
               placeholder="请选择小区">
          <el-option v-for="(items,index) in communityList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
    </el-select>
    <br>
      <span style="width: 10%">感染时间：</span>
    <el-date-picker
      v-model="beginTime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    -
    <el-date-picker
      v-model="endTime"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>
      <el-button type="primary" style="width: 10%" @click="select()">搜索</el-button>
      <el-button type="primary" v-show="role == 3" @click="dialogFormVisible = true" style="width: 10%">添加</el-button>
    </div>
    
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="95" type="selection">
        </el-table-column>
        <el-table-column align="center" label="患者" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="患者姓名">
          <template slot-scope="scope">
            {{ scope.row.patientName }}
          </template>
        </el-table-column>
        <el-table-column label="性别" width="110" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.patientGender == '1'"> 男 </span>
            <span v-else> 女 </span>
          </template>
        </el-table-column>
        <el-table-column label="籍贯" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.patientBirthplace }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.patientPhone }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.patientStatus| statusFilter">{{scope.row.patientStatus | formatStata}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at"  label="感染时间"  width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.infectionDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行程轨迹" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.route }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="200">
          <template slot-scope="scope">
            <el-button  type="success" plain @click="updatePatientStatus(scope.row)">编辑</el-button>
            <!-- <el-button v-else type="info" plain @click="updatePatientShelters(scope.row)">选择</el-button> -->
            <!-- <el-button type="danger" plain @click="delectPatient(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    </div>
   
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="dialogFormVisible_check"
      width="30%">
      <span>拉入本方仓</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_check = false">取 消</el-button>
        <el-button type="primary" @click="choosePatientShelters()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 防疫中心修改状态 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogFormVisible_editor"
      width="30%">
      <span>患者状态</span>
      <el-select style="margin: 10px"
               v-model="patientStatus"
               clearable>
        <el-option label="阴性" value="0"></el-option>
        <el-option label="死亡" value="-1"></el-option>
      </el-select>
      <br>
    <span>转阴死亡时间</span>
    <el-date-picker
      style="margin: 10px"
      :picker-options="pickerOptions"
      v-model="resurrectionDate"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd">
    </el-date-picker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_editor = false">取 消</el-button>
        <el-button type="primary" @click="submitPatient()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getShelterByUser } from "@/api/user"
import { getLevelMenu } from "@/api/regin/area"
import { updatePatientShelters,updatePatientStatus,getPatientInShelters} from "@/api/shelters/index"

export default {
  inject:['reload'],
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "success",
        1: "danger",
      };
      return statusMap[status];
    },
    // 状态显示转换
    formatStata(status) {
      const statusMap = {
        0: '阴性',
        1: '阳性',
      };
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      checkState:2,
      patientName: "",
      cardId: null,
      beginTime:null,
      endTime:null,
      dialogFormVisible_check: false,
      dialogFormVisible_editor: false,
      editorForm:{
        patientId: "",
        patientName: "",
        patientGender: "",
        patientBirthplace: "",
        cardId: "",
        patientPhone: "",
        emergencyContact: "",
        infectionDate: "",
        route: "",
        building: "",
        resurrectionDate: "",
        patientStatus: 1,
        recheckStatus: 0,
        transferDate: null,
        area: null  
      },
      role: "",
      areaLevel:"",
      patientId:"",
      patientAreaId:"",
      selectRegion:null,
      selectStreat:null,
      selectCommunity:null,
      communityList:[],
      streatList:[],
      regionList:[],
      formLabelWidth: "120px",
      page:{
        total:0,
        currentPage: 1,
        size:5,
      },
      patientStatus:"",
      resurrectionDate:"",
      infectionDate:"",
      needPage:true,
      pickerOptions:{
          disabledDate(time) {
            return time.getTime() < Date.now() - 3600 * 1000 * 24;
          }
      },
      areaId:"",
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // console.log(1);
      this.listLoading = true
      this.role = this.$store.state.user.roles[0]
      // if (this.role == '4') {
      //   getPatientInCenter(this.page.currentPage,this.page.size).then((response) => {
      //   if (response.obj) {
      //   this.list = response.obj.list
      //   this.page.total = response.obj.total
      //   }else{
      //     this.$message(
      //     {
      //       message:response.msg,
      //       type:'info'
      //     }
      //   )
      //   }
      //   this.listLoading = false
      //   })
      // }else{
        getPatientInShelters(this.page.currentPage,this.page.size).then((response) => {
        if (response.obj) {
        this.list = response.obj.list
        this.page.total = response.obj.total
        }else{
          this.$message(
          {
            message:response.msg,
            type:'info'
          }
        )
        }
        this.listLoading = false
        })
      // }
      getLevelMenu(1,this.page.currentPage,this.page.size,!this.needPage).then((response) => {
        this.regionList = response.obj.list
      })
      getShelterByUser().then((response) => {
        this.shelterId = response.obj.list
      })
    },
    // findPatientInArea(checkState,role){
    //   findPatientInArea(checkState,role,this.page.currentPage,this.page.size).then((response) => {
    //     this.list = response.obj.list
    //     this.page.total = response.obj.total
    //     this.listLoading = false
    //   })
    // },
    // findAreaList(parentId) {
    //   // console.log(this.selectStreat);
    //   if(parentId != ""){
    //     findAreaList(parentId).then(response => {
    //         this.streatList = response.list
    //         this.areaId = parentId
    //   })
    //   }else{
    //     this.streatList = null
    //   }
    // },
    // findAreaList1(parentId) {
    //   // console.log(this.selectStreat);
    //   if(parentId != ""){
    //     findAreaList(parentId).then(response => {
    //         this.communityList = response.list
    //         this.areaId = parentId
    //   })
    //   }else{
    //     this.communityList = null
    //   }
    // },
    // findAreaList2() {
    //   // console.log(this.selectStreat);
    //   if (selectCommunity != "") {
    //     this.areaId = this.selectCommunity
    //   }
    // },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.page.size = val
        this.fetchData()
      },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.currentPage = val
        this.fetchData()
      },
    select(){
      // if (this.role == '4') {
      //   getPatientInCenter(this.page.currentPage,this.page.size,this.patientName,this.areaId,this.cardId,this.beginDate,this.endDate).then((response) => {
      //   if (response.obj) {
      //   this.list = response.obj.list
      //   this.page.total = response.obj.total
      //   }else{
      //     this.$message(
      //     {
      //       message:response.msg,
      //       type:'info'
      //     }
      //   )
      //   }
      //   this.listLoading = false
      //   })
      // }else{
        getPatientInShelters(this.page.currentPage,this.page.size,this.patientName,this.cardId,this.beginTime,this.endTime).then((response) => {
        if (response.obj) {
        this.list = response.obj.list
        this.page.total = response.obj.total
        }else{
        this.$message(
          {
            message:response.msg,
            type:'info'
          }
        )
        }
        this.listLoading = false
        })
      // }
    },
    

    updatePatientStatus(item){ 
      this.patientId = item.patientId
      this.infectionDate = item.infectionDate
      this.dialogFormVisible_editor = true
    },
    submitPatient(){
      updatePatientStatus(this.patientId,this.patientStatus,this.resurrectionDate).then(response => {
        this.$message(
          {
            message:response.msg,
            type:'success'
          }
        )
        // this.reload();
      })
      this.dialogFormVisible_editor = false
      this.reload();
    },
    updatePatientShelters(item){ 
      // this.patientId = item.patientId
      // this.infectionDate = item.infectionDate
      // this.dialogFormVisible_editor = true
      console.log(item);
    },
    choosePatientShelters(){
      updatePatientShelters(this.patientId,this.patientStatus,this.resurrectionDate).then(response => {
        this.$message(
          {
            message:response.msg,
            type:'success'
          }
        )
        // this.reload();
      })
      this.dialogFormVisible_editor = false
      this.reload();
    },
  }
};
</script>
<style scoped>
.demo-input-suffix {
  margin-left: 1%;
}

.demo-input-suffix .el-input {
  margin: auto 1%;
}

.el-dialog .el-form-item {
  margin-right: 20% !important;

}
.el-dialog .el-form-item__label {
  position: absolute;
}
.el-dialog .el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-dialog .el-select,
.el-input_inner {
  width: auto;
}

</style>